import {designComponent} from "@peryl/react-compose";
import {Icon} from "plain-design";

export const DataStatisticHead = designComponent({
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
  },
  slots: [
    'default',
  ],
  setup({ props, slots }) {
    return () => (
      <div className="pro-data-statistic-head">
        <div className="pro-data-statistic-head-icon pl-text-primary">
          <div className="pro-data-statistic-head-icon-background pl-background-primary"/>
          <Icon icon={props.icon}/>
        </div>
        <span>{props.title}</span>
        <div className="pro-data-statistic-head-space"/>
        {slots.default()}
      </div>
    );
  },
});
